<template>
    <div class="user-info">
        <el-card class="box-card carone">
            <div class="text item textone">
                <el-button type="primary">打印</el-button>
            </div>
        </el-card>
        <el-card class="box-card carone">
            <div class="text item">
                <div>
                    <h2 class="title">员工信息</h2>
                </div>
                <div class="userinfobox">
                    <div class="left">
                        <el-row>
                            <el-col :span="5">
                                <div class="grid-content bg-purple">姓名</div>
                            </el-col>
                            <el-col :span="7">
                                <div class="grid-content bg-purple-light"></div>
                            </el-col>
                            <el-col :span="5">
                                <div class="grid-content bg-purple">性别</div>
                            </el-col>
                            <el-col :span="7">
                                <div class="grid-content bg-purple-light"></div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="5">
                                <div class="grid-content bg-purple">民族</div>
                            </el-col>
                            <el-col :span="7">
                                <div class="grid-content bg-purple-light"></div>
                            </el-col>
                            <el-col :span="5">
                                <div class="grid-content bg-purple">手机号</div>
                            </el-col>
                            <el-col :span="7">
                                <div class="grid-content bg-purple-light"></div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="5">
                                <div class="grid-content bg-purple">居住地</div>
                            </el-col>
                            <el-col :span="7">
                                <div class="grid-content bg-purple-light"></div>
                            </el-col>
                            <el-col :span="5">
                                <div class="grid-content bg-purple">入职时间</div>
                            </el-col>
                            <el-col :span="7">
                                <div class="grid-content bg-purple-light"></div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="5">
                                <div class="grid-content bg-purple">备注</div>
                            </el-col>
                            <el-col :span="19">
                                <div class="grid-content bg-purple-light"></div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="5">
                                <div class="grid-content bg-purple">联系信息</div>
                            </el-col>
                            <el-col :span="19">
                                <div class="grid-content bg-purple-light"></div>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="userimg">
                        <el-row>
                            <el-col :span="4">
                                <div class="grid-content bg-purple img">联系信息</div>
                            </el-col>
                        </el-row>
                    </div>
                </div>

            </div>
        </el-card>
    </div>
</template>

<script>
export default {
 name : "", 
 data(){
  return {
      id:'',
      idt:''
  }
 },
 created(){
        this.idt = this.$route.params.id
     this.getList1()        
 },
 mounted(){
    // console.log(this.idt);

 },
 components : {
     
 },
 methods:{
     async getList1(){
               this.id = this.idt
    //   console.log(this.idt);

      let res = await this.userApi.getUserInfo(this.id)
      console.log(res);

    },
 }
}
</script>


<style lang="scss" scoped>
.box-card {
  padding: 0 0 18px 0;
  margin-bottom: 22px;
  .textone {
    box-sizing: inherit;
    float: right;
  }

  // background-color: red;
}
.userinfobox {
  width: 1024px;
  margin: 0 auto;
  display: flex;
  .left{
      flex: 20;
  }
}
.userimg {
    padding: 30px 20px;
    border: 1px black solid;
    flex: 3;
  float: right;
  .img {
    width: 146px;
    height: 170px;
    background-color: skyblue;
  }
}
.el-row {
  // margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
  //   font-size: ;
}

.bg-purple {
  background: rgb(250, 250, 250);
}
.grid-content {
  // border-radius: 4px;
  min-height: 44px;
  height: 44px;
  border-left: 1px solid rgb(235, 238, 245);
  border-top: 1px solid rgb(235, 238, 245);
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>